<script setup lang="ts" name="Uncle"> //setup语法糖
  import {ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
  let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
  let cars = ref({brand: '奔驰', price: 100}) //ref对象(层级不深)
  let car = reactive({brand:'奔驰', price:100}) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
  let {brand, price} = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
  let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
  let computedResult = computed({ //计算属性(ref响应式)
    get() {
    },
    set(val) {
    }
  })
  const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value
    
  })
  watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)
    
  })
  function generalMethod() { //一般方法
    
  }
</script>

<template> <!--template不编译-->
  <div class="component-name"> <!--vue3无需根标签-->
  </div>
  <div class="component-name">
  </div>
</template>

<style lang="less" scoped> //less嵌套写法,scoped域:样式只对当前组件有效
  .component-name {
     
  }
</style>